<template>
    <div class="chart-wrapper">
        <canvas :id="id"></canvas>
    </div>
</template>

<script>
import F2 from "@antv/f2/lib/index-all";
import $ from "jquery";
import { serchReport } from "../../services/control";
import { Toast } from "mand-mobile";

export default {
    props: ["id", "data"],
    data() {
        return {};
    },
    methods: {
        initChart() {
            const data = this.$props.data;
            const chart = new F2.Chart({
                id: this.$props.id,
                pixelRatio: window.devicePixelRatio
            });

            chart.source(data, {
                totalTaskCnt: {
                    tickCount: 5,
                    min: 0
                },
                statDate: {
                    type: "timeCat",
                    mask: "MM/DD",
                    tickCount: 6
                }
            });
            chart.tooltip({
                custom: true,
                showXTip: true,
                showYTip: true,
                snap: true,
                crosshairsType: "xy",
                crosshairsStyle: {
                    lineDash: [2]
                }
            });
            chart.axis("statDate", {
                label: function label(text, index, total) {
                    const textCfg = {};
                    if (index === 0) {
                        textCfg.textAlign = "left";
                    } else if (index === total - 1) {
                        textCfg.textAlign = "right";
                    }
                    return textCfg;
                }
            });
            chart.line().position("statDate*totalTaskCnt");
            chart.render();
        }
    },
    mounted() {
        this.initChart();
    }
};
</script>

<style lang="stylus" scoped>
.chart-wrapper {
    width: 100%;
}

canvas {
    width: 100vw;
    width: 350PX;
}
</style>
